<template>
  <div>
    <el-card class="box-card">
      <el-button
        type="success"
        size="mini"
        icon="el-icon-plus"
        @click="show(2, '添加一级菜单')"
        plain
        >添加一级菜单</el-button
      >
      <el-table
        :data="menuList"
        tooltip-effect="dark"
        style="width: 100%"
        height="610px"
        row-key="quotaId"
        border
        width="auto"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="菜单名称"> </el-table-column>
        <el-table-column prop="weight" label="权重"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop=""
          label="选项">
          <template scope="scope">
            <el-button v-if="scope.row.hasOptions" size="mini" @click="queryOptionsByQuotaId(scope.row.quotaId)" type="primary">
              查看选项
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="show(0, '修改菜单', scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="delMenu(scope.row.id)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-plus"
              size="mini"
              @click="show(1, '新增菜单', scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-drawer
      title="指标详情"
      :visible.sync="drawer"
      :before-close="handleClose">
      <div v-for="(item, i) in quotaOptions" :key="i" class="text item">
        {{i + 1 + '、    ' + item.optionName}}
      </div>
    </el-drawer>
    <QuotaAdd
      :addOrUpdateVisible="addOrUpdateVisible"
      @changeShow="showAddOrUpdate"
      ref="addOrUpdateRef"
      :title="title"
      :tag="tag"
      :subData="subData"
      :originName="originName"
    ></QuotaAdd>
  </div>
</template>

<script>
import { queryOptionsByQuotaId, treeOfQuota } from '../../api/quota'
import QuotaAdd from './QuotaAdd'

export default {
  name: 'Quota',
  data () {
    return {
      menuList: [],
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
      title: '',
      subData: {
        id: null,
        name: '',
        weight: '',
        updateTime: '',
        parentId: null
      },
      tag: 1,
      originName: '',
      drawer: false,
      quotaOptions: []
    }
  },
  components: {
    QuotaAdd
  },
  created () {
    this.quotaTree()
  },
  methods: {
    async quotaTree () {
      const { data } = await treeOfQuota()
      if (data.code === '2000') {
        this.menuList = data.data
        console.log(data.data)
      } else {
        this.$message({
          message: data.msg,
          type: 'error'
        })
      }
    },
    async queryOptionsByQuotaId (quotaId) {
      this.drawer = true
      const { data } = await queryOptionsByQuotaId(quotaId)
      if (data.code === '2000') {
        this.quotaOptions = data.data
      } else {
        this.$message({
          message: data.msg,
          type: 'error'
        })
      }
    },
    // 按钮点击事件 显示新增编辑弹窗组件
    show (tag, title, id) {
      // this.title = title
      // this.tag = tag
      // if (tag < 1) {
      //   getMenuById(id).then((res) => {
      //     this.subData = res.data.data
      //     this.originName = res.data.data.name
      //   })
      // } else if (tag < 2) {
      //   this.subData.parentId = id
      // } else {
      //   this.subData.parentId = 0
      // }
      this.addOrUpdateVisible = true
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate (data) {
      this.addOrUpdateVisible = data !== 'false'
      this.quotaTree()
    },
    // 删除菜单以及子菜单
    // delMenu (delId) {
    //   this.$confirm("此操作将永久删除菜单及子菜单, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   }).then(() => {
    //     delMenu(delId)
    //       .then((res) => {
    //         if (res.data.code === "2000") {
    //           this.$message({
    //             message: res.data.msg,
    //             type: "success",
    //           });
    //         } else {
    //           this.$message({
    //             message: res.data.msg,
    //             type: "error",
    //           });
    //         }
    //         this.menuTree();
    //       })
    //       .catch((e) => {
    //         console.log(e);
    //       });
    //   });
    // },
    handleClose (done) {
      done()
      this.quotaOptions = []
    }
  }
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-dropdown {
  float: right;
  padding-right: 20px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
  margin-left: 18px;
}
</style>
